<template>
  <div :style="{ width: '100%', display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', marginTop: (28 / 96) + 'rem', marginBottom: (36 / 96) + 'rem' }">
    <div :style="{ width: (857 / 96) + 'rem', height: (66 / 96) + 'rem', background: '#EEEEEE', borderRadius: (33 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }">
      <div :style="{ width: (707 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', marginLeft: (42 / 96) + 'rem', marginRight: (42 / 96) + 'rem' }">
        <input type="text" :style="{ width: '100%', fontSize: (30 / 96) + 'rem', fontFamily: 'KaiTi', fontWeight: '400', color: '#999999', lineHeight: (24 / 96) + 'rem', textAlign: 'left' }" :placeholder="placeholderText" v-model="leagueName">
      </div>
      <div @click="toSearchClick(leagueName)" :style="{ width: (66 / 96) + 'rem', height: (66 / 96) + 'rem', background: '#6168FE', borderRadius: '50%', display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', cursor: 'pointer' }">
        <i class="iconfont iconsousuo" :style="{ fontSize: (40 / 96) + 'rem', color: '#FFFFFF' }"></i>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Search',
    props: {
      placeholderText: {
        type: String,
        default() {
          return "搜索联赛";
        }
      }
    },
    data() {
      return {
        leagueName: ""
      }
    },
    methods: {
      toSearchClick(leagueName) {
        this.$emit("toSearchClick", leagueName);
      }
    }
  }
</script>

<style scoped>
  :-moz-placeholder {
    font-family: KaiTi;
    font-weight: 400;
    color: #999999;
    opacity: 1;
  }

  ::-moz-placeholder {
    font-family: KaiTi;
    font-weight: 400;
    color: #999999;
    opacity: 1;
  }

  input:-ms-input-placeholder {
    font-family: KaiTi;
    font-weight: 400;
    color: #999999;
    opacity: 1;
  }

  input::-webkit-input-placeholder {
    font-family: KaiTi;
    font-weight: 400;
    color: #999999;
    opacity: 1;
  }
</style>
